<template>
    <div class="comment">
        <div v-for="item in commentsList" :key="item.id">
            <ComponentItem :comment="item"/>
        </div>
    </div>
</template>

<script>
import ComponentItem from "./CommentItem.vue";
export default {
    name: "CommentList",
    components: {
        ComponentItem,
    },
    props: {
        commentsList: {
            type: Array,
            props: () => [],
        },
    },
};
</script>

<style scoped>
.comment {
    padding: 2px 4px 0;
    margin: 6px 0 0;
}

.head {
    color: #aca9a9;
}

.head span {
    cursor: pointer;
}

.reply {
    text-decoration: underline;
    color: #aca9a9;
    cursor: pointer;
}
</style>